<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2023-09-26 17:55:33
 * @LastEditors: 甯左龙 1173405584@qq.com
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiInput\uiInput.vue
 * CIMC-V2
-->
<template>
  <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <div class="w-full">
      <codemirror
        v-if="refreshShow"
        :id="info._id"
        :ref="`codemirror_${info._id}`"
        v-model:value="formDataModel"
        v-ui-ref="vSetRef"
        :height="getHeight"
        :options="cmOptions"
      />
    </div>
  </UiFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import codemirror from 'codemirror-editor-vue3'
  // plugin-style
  import 'codemirror-editor-vue3/dist/style.css'
  // language
  import 'codemirror/mode/sql/sql.js'
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/addon/display/autorefresh.js'
  // theme
  import 'codemirror/theme/dracula.css'
  //代码折叠
  import 'codemirror/addon/fold/foldgutter.css'
  import 'codemirror/addon/fold/foldcode'
  import 'codemirror/addon/fold/foldgutter'
  import 'codemirror/addon/fold/brace-fold'
  import 'codemirror/addon/fold/comment-fold'
  import isObject from 'lodash/isObject'
  import isString from 'lodash/isString'
  export default defineComponent({
    name: 'UiCodemirror',
    components: { codemirror },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        cmOptions: {
          tabSize: 1,
          smartIndent: true,
          indetUnit: 1,
          styleActiveLine: true,
          lineNumbers: false,
          line: true,
          mode: 'text/x-mysql',
          theme: 'dracula',
          foldGutter: true,
          lineWrapping: true,
          autoRefresh: true,
          clientHeight: 0,
        },
        refreshShow: true,
      }
    },
    computed: {
      type() {
        return this.info.extension.type.value
      },
      getHeight() {
        return !this.hasPreview ? 200 : this.info.extension.height.value == 'auto' ? this.clientHeight - 132 : this.info.extension.height.value
      },
    },
    watch: {
      formDataModel: {
        deep: true,
        handler(newval) {
          if (newval) {
            if (isObject(newval)) {
              this.formDataModel =
                this.info.extension.formatting && this.info.extension.formatting.value ? JSON.stringify(newval, null, 4) : JSON.stringify(newval)
            }
            if (isString(newval)) {
              this.formDataModel =
                this.info.extension.formatting && this.info.extension.formatting.value ? JSON.stringify(JSON.parse(newval), null, 4) : newval
            }
          }
        },
      },
      type: {
        handler(newval) {
          if (newval == 'x-mysql') {
            this.cmOptions = {
              tabSize: 1,
              smartIndent: true,
              indetUnit: 1,
              styleActiveLine: true,
              lineNumbers: false,
              line: true,
              mode: 'text/x-mysql',
              theme: 'dracula',
              foldGutter: true,
              lineWrapping: true,
              autoRefresh: true,
            }
          } else if (newval == 'javascript') {
            this.cmOptions = {
              tabSize: 2,
              smartIndent: true,
              indetUnit: 2,
              styleActiveLine: true,
              lineNumbers: false,
              line: true,
              mode: 'javascript',
              theme: 'dracula',
              foldGutter: true,
              lineWrapping: true,
              autoRefresh: true,
              clientHeight: 0,
            }
          } else {
            this.cmOptions = {
              theme: 'dracula',
              foldGutter: true,
              mode: 'application/json', //设置json模式
              lineNumbers: true, //是否显示左边换行术字
              lineWrapping: true, //是否折叠
              // matchBrackets: true,
              indentUnit: 2,
              // readOnly: true,
              gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
              autoRefresh: true,
            }
          }
        },
      },
    },
    created() {
      this.windowResize()
    },
    mounted() {
      if (this.info.extension.formatting && this.info.extension.formatting.value) {
        this.cmOptions = {
          theme: 'dracula',
          foldGutter: true,
          mode: 'application/json', //设置json模式
          lineNumbers: true, //是否显示左边换行术字
          lineWrapping: true, //是否折叠
          // matchBrackets: true,
          indentUnit: 2,
          // readOnly: true,
          gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
          autoRefresh: true,
        }
      }
    },
    methods: {
      windowResize() {
        this.clientHeight = document.documentElement.clientHeight
      },
      $change() {
        this.refreshShow = false
        setTimeout(() => {
          this.refreshShow = true
        })
      },
    },
  })
</script>
<style scoped>
  :deep() .hasPrefix .el-input__inner {
    padding-left: 25px;
  }
</style>
